<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id='app'>

        <!-- <div>
            你
            好 世
            界
        </div> -->

        <!-- pre 标签就是用来保留原有格式 -->
        <pre>
            你
            好 世
            界
        </pre>

        <!-- 
            v-pre 跳过该元素及其所有子元素的编译
            不解析 message 直接渲染成 {{message}}
         -->
        <p v-pre>{{message}}</p>

        <!-- v-once 仅渲染元素和组件一次，并跳过之后的更新。 -->
        <p v-once> {{count}} </p>
        <button @click="count++">点击增加 {{count}}</button>

        <!-- 
            v-memo 用来做缓存的，我们内部的内容发生变化后，不会重新渲染
            只有当配置的依赖项发生变化的时候，才会重新渲染
         -->
        <p v-memo="[count]"> {{message}} </p>
        <button @click="message='鹅鹅鹅'">修改 message</button>

        <h1 v-cloak> {{message}} </h1>
        <!-- <h1> {{message}} </h1>
        <h1> {{message}} </h1>
        <h1> {{message}} </h1>
        <h1> {{message}} </h1>
        <h1> {{message}} </h1> -->

    </div>
</body>
<script>
    const app = {
        data() {
            return {
                count: 100,
                message: '锄禾日当午'
            }
        },
        methods: {},
    }
    const vm = Vue.createApp(app)

    setTimeout(() => {
        vm.mount('#app')
    }, 5000)


</script>

</html>